<template>
  <div class="system-wrapper">
    <div class="system-title">
      {{this.title}}
    </div>

    <div class="hearth-system">
      <div class="system-hearth-title">健康度</div>
      <div class="system-hearth-number"><animatedInteger :needColor="true" :value="this.data.hearth"></animatedInteger></div>
    </div>
    <div class="system-type">
      {{this.data.type}}
    </div>
    <div class="system-charts">
      <div class="cpu-charts chart-item">
        <div class="label">CPU</div>
        <div class="bar-wrapper">
          <div class="bar-data" :style="{width:(this.data.cpu.use*100/this.data.cpu.total)+'%'}"></div>
        </div>
        <div class="bar-info">
          {{this.data.cpu.use}}核/{{this.data.cpu.total}}核
        </div>
      </div>
      <div class="rom-charts chart-item">
        <div class="label">内存</div>
        <div class="bar-wrapper">
          <div class="bar-data" :style="{width:this.data.rom.use*100/this.data.rom.total+'%'}"></div>
        </div>
        <div class="bar-info">
          {{this.data.rom.use}}GB/{{this.data.rom.total}}GB
        </div>
      </div>
      <div class="hdd-charts chart-item">
        <div class="label">存储</div>
        <div class="bar-wrapper">
          <div class="bar-data" :style="{width:this.data.hdd.use*100/this.data.hdd.total+'%'}"></div>
        </div>
        <div class="bar-info">
          {{this.data.hdd.use}}TB/{{this.data.hdd.total}}TB
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import animatedInteger from '@/components/animated-integer';
  export default {
    data() {
      return {}
    },
    props: {
      data: Object,
      title: String
    },
    components:{animatedInteger}
  }
</script>
<style lang="less" scoped>
  .system-wrapper {
    height: 210px;
    overflow: hidden;
    position: relative;
    background-image: url('~assets/images/bright.svg');
    background-repeat: no-repeat;
    background-position: -5px 0px;
    background-size: 350px;

    .system-charts {
      position: absolute;
      top: 90px;
      left: 0;
      .label {
        color: orange;
        width: 50px;
      }
      .bar-info {
        color: rgba(255, 255, 255, 0.7);
        margin-left: 16px;
        font-size: 13px;
      }
      .chart-item {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin:12px 0;
      }
      .bar-wrapper {
        margin-top: 3px;
        width: 150px;
        height: 15px;
        background-color: rgba(0, 0, 0, 0.5);
        .bar-data {
          height: 15px;
          background-color: #00D6FF;
          transition: width 0.7s ease;
        }
      }
      .cpu-charts {
      }
      .rom-charts {
      }
      .hdd-charts {
      }
    }
    .system-title {
      font-size: 22px;
      color: #00D6FF;
      font-weight: 600;
      position: absolute;
      top: 11px;
      text-shadow:3px 3px 2px #000;
      left: 0;
    }
    .system-type {
      font-size: 13px;
      color: rgba(255, 255, 255, 0.7);
      position: absolute;
      top: 60px;
      left: 0;
    }
    .hearth-system {
      position: absolute;
      right: 53px;
      top: 16px;
      text-align: center;
      .system-hearth-title {
        color: #00D6FF;
        font-size: 12px;
      }
      .system-hearth-number {
        font-size: 28px;
        font-weight: 600;
        color: orange;
        position: relative;
        top: -5px;
      }
    }
  }
</style>
